<template>
  <div>
    <div style="margin: 20px 0px;display: flex;justify-content: center;">
      <el-input placeholder="关键词搜索" v-model="keyword" style="width: 55%;min-width: 400px;"
      @keyup.enter.native="gotoSearchKey(keyword)">
        <el-button slot="append" icon="el-icon-search" @click="gotoSearchKey(keyword)"></el-button>
      </el-input>
    </div>
    <div class="button-container">
      <div class="button-wrapper" v-for="item in typeList" :key="item.id" @click="changeTypeNews(item.id)">
        <img class="sports-button" :src="item.cover" />
        <div class="button-text">{{ item.name }}</div>
      </div>
    </div>
    <div class="newsList" v-loading="loading">
      <div v-for="news in newsList" :key="news.id" class="news-item" @click="goToNewsDetail(news.id)">
        <img class="cover-image" :src="news.cover" alt="News Cover">
        <div class="content">
          <div class="title">{{ news.title }}</div>
          <div class="publish-time">
            <div style="display: flex;align-items: center;">
              <img :src="news.avatar" style="width: 38px; height: 38px; border-radius: 50%" />
              <span style="padding-left: 4px;font-size: 17px;">
                {{ news.nickname }}
              </span>
            </div>
            <div>
              {{ news.publishTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="page">
      <el-pagination background layout="prev, pager, next" :page-size="6" @current-change="handlePageChange"
        :total="totalNews">
      </el-pagination>
    </div> -->
  </div>
</template>

<style scoped>
.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30px;
  cursor: pointer;
}

.button-wrapper:hover {
  transform: translateY(-2px);

  .button-text {
    color: #409EFF;
  }
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sports-button {
  width: 95px;
  height: 54px;
}

.button-text {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}

.newsList {
  margin-top: 50px;
  padding: 0px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.news-item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: calc(33.33% - 20px);
  height: 300px;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.news-item:hover {
  .title {
    color: #409EFF;
  }
}

@media (max-width: 768px) {
  .news-item {
    width: 100%;
    /* 在较小的屏幕上，每行显示一个项目 */
  }
}

.news-item .cover-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 10px;
}

.news-item .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 8px;
  width: 100%;
  height: 40%;
}

.news-item .title {
  font-size: 20px;
  font-weight: bold;
}

.news-item .publish-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #888888;
  margin: 0px 12px 12px;
}

.page {
  margin-left: 300px;
  max-width: 200px;
  /* 设置分页器的最大宽度 */
}

.box {
  display: flex;
  width: 720px;
  height: 30px;
  border: 2px solid red;
  margin-left: 260px;
  margin-bottom: 30px;
  border-radius: 5px;
}

.input {
  float: left;
  width: 400px;
  /*宽400*/
  height: 20px;
  /*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
  outline: none;
  border: none;
  /*取消文本框内外边框*/
}

.button {
  float: left;
  width: 96px;
  height: 30px;
  color: white;
  background-color: red;
  /*将按钮背景设置为红色，字体设置为白*/
  border: none;
  outline: none;
  /*取消边框和外边框将按钮边框去掉*/
}
</style>

<script>
import { userGetAllCategory } from '@/api/controller/5.type/index'
import { userGetArticles } from '@/api/controller/4.news/index'
// 假设有一个包含新闻数据的数组
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      totalNews: 1000, // 总新闻条目数
      newsList: [], // 新闻列表
      keyword: '',
      newPageForm: {
        pageNum: 1,
        pageSize: 20,
        typeId: -1
      },
      typeList: [],
      typePageForm: {
        pageNum: 1,
        pageSize: 20
      },
      loading: false
    };
  },
  mounted() {
    this.getTypeList()
    this.getNewList();
  },
  methods: {
    goToNewsDetail(id) {
      // 在点击新闻项时进行页面跳转，将整个新闻对象作为参数传递给详情页面
      this.$router.push({ path: '/newsDetail/' + id });
    },
    changeTypeNews(id) {
      if (id == this.$route.query.type) return
      this.$router.push({
        path: '/', query: { type: id }
      })
    },
    async getTypeList() {
      userGetAllCategory(this.typePageForm.pageNum, this.typePageForm.pageSize)
        .then((response) => {
          const { data } = response;
          this.typeList = data.list
        })
        .catch((error) => {
          this.$message.error(error.message);
        })
    },
    gotoSearchKey(key) {
      if (key === '') {
        this.$message.error('搜索关键词不能为空！')
        return
      }
      this.$router.push({
        path: '/search', query: { key: key }
      })
    },
    async getNewList() {
      this.loading = true
      userGetArticles(this.newPageForm)
        .then((response) => {
          const { data } = response;
          this.newsList = data.list
        })
        .catch((error) => {
          this.$message.error(error.message);
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  // 侦听器
  watch: {
    //监听路由
    //监听路由的categoryId属性的数据变化
    '$route.query.type': function () {
      // 只要categoryId的值发生变化,这个方法就会被调用
      this.newPageForm.typeId = this.$route.query.type
      //重新调用请求数据的方法，刷新页面数据
      this.getNewList()
    }
  },
};
</script>